<template>
  <div id="system">
    <el-card style="width: 600px; margin: 30px auto;" class="box-card">
      <div slot="header" class="clearfix">
        <span>系统配置</span>
      </div>
      <el-form :rules="rules" style="width: 100%;" ref="form" :model="form" label-width="80px">
        <el-row :gutter="10">
          <el-col :span="24">
            <el-form-item prop="qq" label="QQ">
              <el-input prefix-icon="el-icon-search" v-model="form.qq" size="small" placeholder="QQ"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="wx" label="微信">
              <el-input prefix-icon="el-icon-search" v-model="form.wx" size="small" placeholder="微信"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="copyright" label="版权">
              <el-input prefix-icon="el-icon-search" v-model="form.copyright" size="small" placeholder="版权"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="record" label="备案号">
              <el-input prefix-icon="el-icon-search" v-model="form.record" size="small" placeholder="备案号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item style="text-align: right;">
              <el-button type="info" @click="getSystem">重置</el-button>
              <el-button type="primary" style="margin-left: 30px;" @click="tj">提交</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>


  </div>
</template>

<script>
import { getSystem, setSystem } from '@/api/index'
export default {
  name: 'system',
  data() {
    return {
      form: {
        qq: '',
        wx: '',
        copyright: '',
        record: '',
      },
      rules: {
        qq: [
          { required: true, message: '请输入', trigger: 'blur' },
        ],
        wx: [
          { required: true, message: '请输入', trigger: 'blur' },
        ],
        copyright: [
          { required: true, message: '请输入', trigger: 'blur' },
        ],
        record: [
          { required: true, message: '请输入', trigger: 'blur' },
        ],
      },
    }
  },
  mounted() {
    this.getSystem();
  },
  methods: {
    getSystem() {
      getSystem().then((res) => {
        if (res.data.status) {
          this.form = res.data.results
        } else {
          this.$message.error('获取失败')
        }
      })
    },
    tj() {
      setSystem(this.form).then(res => {
        if (res.data.status) {
          this.$message.success('成功')
        } else {
          this.$message.error('失败')
        }
      })
    },
  }
}
</script>

<style lang="less" scoped></style>